<template>
    <el-button  v-if="dc" :size="size" :icon="Download" plain type="warning" @click="exportData()" style="">
          导出
    </el-button>
    <el-button v-if="dr" :size="size" :icon="Upload" plain type="info" @click="handleImport()" style="">
          导入
    </el-button>
     <!-- 导入对话框 -->
    <el-dialog :title="title" :show-close="false"  v-model="open" width="400px" append-to-body >
      <el-upload
      v-loading="upload.Dloading"
        ref="refUpload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :on-change="handleChange"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        
      </el-upload>
      <div class="el-upload__tip" >
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" >提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="submitFileForm" :disabled='upload.buttom'>确 定</el-button>
            <el-button @click="Cancel" >取 消</el-button>
          </span>
        </template>
      
    </el-dialog>
    <el-dialog
        title="导入结果"
        v-model="dialogVisible"
        width="40%"
        >
        <span ><p v-html="upload.responseData" style="height: 400px;overflow-y: auto;"></p></span>
        <template #footer>
          <span class="dialog-footer">
          <el-button @click="dataVisible">取 消</el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script >
import { computed, ref ,reactive,defineComponent, onMounted} from 'vue'
import { useStore } from 'vuex'
import { upload } from '@/api/upload';
import { exportExcel } from "@/utils/export";
import {Download,Upload} from '@element-plus/icons-vue'
export default defineComponent({
    name: 'Index',
    props: {
      tHead:Object,
      exlData:Array,
      tName:String,
      dc:Boolean,
      dr:Boolean
    },
    setup(props,context){
      let title=ref("显示/隐藏")
      // 是否显示弹出层
      let open= ref(false)
      const dialogVisible=ref(false)
        // 导入参数
      const upload=reactive({

        count:0,
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        buttom:true,
        Dloading:false,
        responseData:[],
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + "getToken()" },
        // 上传的地址
        url: "api/upload"
      })
      const store = useStore()
      const size = computed(() => {
        return store.getters['setting/size'];
      });
      // 定义一个ref，并return出去 
      const refUpload = ref(null);
      const { proxy } = getCurrentInstance() 

      const methods={
          Cancel(){
            open.value=false
            upload.isUploading = false;
            refUpload.value.clearFiles();
          },
          dataVisible(){
            upload.buttom=true
            dialogVisible.value=false
          },
          exportData(){
            exportExcel(props.exlData,props.tHead, props.tName)
          },
          /** 导出模板按钮操作 */
        importTemplate() {
         
        },
        /** 导入按钮操作 */
        handleImport() {
          title.value = "数据的导入";
          open.value = true;
        },
      // 选择文件
      handleChange(uploadFile, uploadFiles) {
        upload.buttom=false
        if(upload.count==1){
            upload.buttom=true
            upload.count=0
        }
        // proxy.Warning(
        //   `当前选择的文件是 ${uploadFile.name} ，文件大小为 ${
        //     uploadFile.size
        //   } `
        // )
      },

        handleFileError(event, file, fileList){
          upload.count=0
          proxy.Error("导入失败！")
          upload.count=upload.count+1
          upload.buttom=true
          upload.Dloading=false
          upload.isUploading = false;
        },

        // 文件上传中处理
      handleFileUploadProgress(event, file, fileList){
        upload.isUploading = true;
      },
       
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          proxy.Success("导入成功！")
          upload.Dloading=false
          open.value = false;
          upload.isUploading = false;
          refUpload.value.clearFiles();
          dialogVisible.value=true
          upload.responseData=response.msg
        },
        // 提交上传文件
        submitFileForm() {
          upload.buttom=true
          refUpload.value.submit()
          upload.Dloading=true 
        }
        }
        return {
           ...methods,
           size,
           upload,
           open,
           title,
           dialogVisible,
           Download,
           Upload,
           refUpload,
           onMounted
       }
    }
    

  })
</script>

<style scoped>
.dialog-footer{
  position: relative;
  margin-left: 60%;
  margin-top: 15px;
}
</style>
